<template>
  <div id="putPlan">
    <div class="filterQuery">
      <div class="tiao">
        <span class="label">投放状态：</span>
        <el-radio-group v-model="radio" size="small">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="1">待投放</el-radio-button>
          <el-radio-button label="2">已投放</el-radio-button>
          <!-- <el-radio-button label="打回修改"></el-radio-button>
          <el-radio-button label="审核通过"></el-radio-button>
          <el-radio-button label="无效"></el-radio-button> -->
        </el-radio-group>
      </div>
    </div>
    <div class="putCon">
      <div class="tipCon">
        <div>
          <span class="firstSpan">
            计划投放总额：
            <span style="color:red;">¥{{playsum}}</span>
          </span>
          <span>
            已投放总额：
            <span style="color:red;">¥{{deployed}}</span>
          </span>
        </div>
        <el-button size="small" type="warning" @click="jianli">+ 建立投放计划</el-button>
      </div>
      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="batch" label="投放批次" width="180" align="center"></el-table-column>
          <el-table-column prop="supplyNum" label="供应商数量" width="180" align="center"></el-table-column>
          <el-table-column prop="receiveAmount" label="应收账款金额" align="center"></el-table-column>
          <el-table-column prop="total" label="计划投放总额" align="center"></el-table-column>
          <el-table-column prop="deplayDate" label="计划投放日期" align="center"></el-table-column>
          <el-table-column prop="requestDate" label="提交日期" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="shenhe(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
           <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        </div>
      </div>
    </div>
    <!-- -------------------------- -->
    <el-dialog :visible.sync="dialogVisible" width="1250px">
      <div class="diasel" >
        <el-select v-model="diaSelvalue" placeholder="请选择投放批次" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-date-picker v-model="tfdate" type="date" placeholder="请选择投放日期" size="small" value-format="yyyy-MM-dd">
    </el-date-picker>
      </div>
      <div class="blueT">请选择收账款</div>
      <el-table :data="diatableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column prop="receiveId" label="序号" width="180" align="center"></el-table-column>
        <el-table-column prop="clientId" label="业务ID" width="180" align="center"></el-table-column>
        <el-table-column prop="supplyCompany" label="供应商" align="center"></el-table-column>
        <el-table-column prop="projectCompany" label="项目公司" align="center"></el-table-column>
        <el-table-column prop="contractName" label="合同名称" align="center"></el-table-column>
        <el-table-column prop="receiveAmount" label="应收账款" align="center"></el-table-column>
        <el-table-column prop="endDate" label="到期日" align="center"></el-table-column>
        <el-table-column prop="planAmount" label="融资金额" align="center"></el-table-column>
        <el-table-column type="selection" width="55" label="选择"></el-table-column>
      </el-table>
      <div class="block" style="margin-top: 15px; text-align: right; margin-right: 20px;">
           <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total1"
        ></el-pagination>
        </div>
      <div class="diabtn">
        <el-button type="primary" size="small" @click="diasubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "putPlan",
  data() {
    return {
      radio: "",
      dialogVisible: false,
      options: [
        {
          value: "1",
          label: "第一批次"
        },
        {
          value: "2",
          label: "第二批次"
        },
        {
          value: "3",
          label: "第三批次"
        }
      ],
      tableData: [],
      value: "",
      diaSelvalue: "",
      currentPage: 1,
      currentPage1: 1,
      total: null,
      total1: null,
      deployed: '', //已投放总额
      playsum: '',  //计划投放总额
      // newArr: [],
      // newObj: {
      //   batch: '', // 是 string 投放批次 
      //   projectId: '', // 是 string 项目Id 
      //   receiveId: '', // 是 string 项目应收款Id 
      //   receiveAmount: '', // 是 string 应收账款 
      //   planAmount: '', // 是 string 融资金额 
      //   deployDate: '', // 是 Date 投放日期 
      //   requestDate: '', // 是 Date 申请日期 
      // }
      multipleSelection: [],
      diatableData: [],
      tfdate: ''
    };
  },
  created () {
    this.getdata(1);
  },
  methods: {
    diasubmit() {
      if (!this.diaSelvalue) {
         this.$message({message: '请选择投放批次',type: 'warning'});
         return false;
      }
      if (!this.tfdate) {
         this.$message({message: '请选择投放日期',type: 'warning'});
         return false;
      } 
      if (this.multipleSelection.length == 0) {
        this.$message({message: '请勾选列表',type: 'warning'});
         return false;
      }
      this.multipleSelection.forEach((item, index)=> {
        item.batch = this.diaSelvalue;
        item.deployDate = this.tfdate;
      })
      this.axios.post('AdminAPI/marketProject/addMarketProject',this.multipleSelection)
        .then(({data})=> {
          if (data.code == 200) {
            this.dialogVisible = false;
            this.multipleSelection = [];
          }
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    shenhe(row) {
      this.axios.post('AdminAPI/marketProject/deployMarketProject',{projectId: sessionStorage.getItem("swdypId")-0, batch: row.batch})
        .then(({data})=> {
          if (data.code == 200) {
             this.$message({message: '发布成功',type: 'success'});
          }
        })
    },
    getdiadata(val) {
      this.currentPage1 = val;
      let obj = {
        projectId: sessionStorage.getItem("swdypId"),
        page: this.currentPage1
      };
      this.axios
        .get("AdminAPI/marketProject/showAccountReceiveInfoList", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.diatableData = data.data;
          this.total1 = data.pageInfo.total;
        });
    },
    getdata(val) {
      this.currentPage = val;
      let obj = {
        projectId: sessionStorage.getItem("swdypId"),
        state: this.radio,
        page: this.currentPage
      };
      this.axios
        .get("AdminAPI/marketProject/getMarketProjectList", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.tableData = data.data.dataList;
          this.deployed = data.data.deployed;
          this.playsum = data.data.total;
          this.total = data.pageInfo.total;
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val;
      this.getdiadata(val);
    },
    jianli() {
      this.dialogVisible = true;
      this.getdiadata(1);
    }
  },
  watch: {
    radio:function() {
      this.getdata(1);
    }
  }
};
</script>

<style lang="scss">
#putPlan {
  background: white;
  .filterQuery {
    margin-top: 10px;
    background: #e2eefd;
    padding-left: 34px;
    position: relative;
    .tiao {
      padding: 10px 0;
      .label {
        font-size: 20px;
        vertical-align: middle;
        color: #333333;
      }
      .el-radio-button__inner {
        border: none;
        padding: 6px 15px;
        background: none;
        font-size: 18px;
        border-radius: 0;
        margin-right: 15px;
      }
      .el-radio-button {
        &.is-active {
          span {
            background-color: #409eff !important;
          }
        }
      }
    }
  }
  .putCon {
    padding: 0 74px;
    .tipCon {
      display: flex;
      justify-content: space-between;
      margin: 25px 0;
      .firstSpan {
        margin-right: 50px;
      }
    }
  }
  .table {
    background: white;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
  .diasel {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(185,185,185,1);
    .el-select {
      position: relative;
      transform: translateY(-60%);
    }
    .el-date-editor {
      transform: translateY(-60%);
    }
  }
  .blueT {
    font-size:18px;
    color:rgba(30,124,240,1);
    margin: 18px 0;
  }
  .has-gutter tr th {
      background: #fefaf1;
  }
  .diabtn {
    text-align: center;
    margin: 20px;
  }
  .tableBox {
    .leave {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 8px 5px;
          &:nth-child(odd) {
            background: #fffaf3;
          }
        }
      }
    }
    .vertatic {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        &:first-child {
          td {
            background: #fffaf3;
          }
        }
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 8px 8px;
          .red {
            color: #e64545;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
